<template>
	<view class="repair-detail">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view class="title">详情</view>
			<view class="right-icons">
				<text class="iconfont">&#xe601;</text>
			</view>
		</view>

		<!-- 维修信息 -->
		<view class="info-section">
			<view class="section-title">维修信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">维修单号:</text>
					<text class="value">{{ repairInfo.repairId }}</text>
				</view>
				<view class="info-item">
					<text class="label">车主姓名:</text>
					<text class="value">{{ repairInfo.customer.nickName}}</text>
				</view>
				<view class="info-item">
					<text class="label">联系方式:</text>
					<text class="value clickable" @tap="makePhoneCall">{{ repairInfo.customer.phone }}</text>
				</view>
				<view class="info-item">
					<text class="label">维修方式:</text>
					<text class="value">{{ repairInfo.repairWay==0?"到店维修":"上门维修" }}</text>
				</view>
				<view class="info-item">
					<text class="label">取车位置:</text>
					<text class="value clickable location" @tap="openLocation">{{ repairInfo.location }}</text>
				</view>
				<view class="info-item">
					<text class="label">预约日期:</text>
					<text class="value">{{ repairInfo.reservationTime }}</text>
				</view>
				<view class="info-item">
					<text class="label">提交日期:</text>
					<text class="value">{{ repairInfo.repairTime }}</text>
				</view>
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">车辆类型:</text>
					<text class="value">{{ repairInfo.carInfo.type==carInfo1.id?carInfo1.name:"未知"}}</text>
				</view>
				<view class="info-item">
					<text class="label">车牌号:</text>
					<text class="value">{{ repairInfo.carInfo.carNum }}</text>
				</view>
				<view class="info-item">
					<text class="label">整车照片:</text>
				</view>
				<view class="image-preview">
					<image :src="repairInfo.vehiclePhotos" mode="aspectFit" @tap="previewImage(carInfo.fullImage)"></image>
				</view>
				<view class="info-item">
					<text class="label">维修部位照片:</text>
					<image :src="repairInfo.repairPhotos" mode="aspectFit" @tap="previewImage(carInfo.fullImage)"></image>
				</view>
				<view class="image-grid">
					
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view
			class="bottom-button"
			:class="taskList.status!=0 ?'disabled':'' "
			@tap="confirmArrival"
		>
			{{ taskList.status!=0 ? '已到场' :  '确认到场'}}
		</view>
	</view>
</template>

<script setup>

import { ref } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import request from '../../../../utils/request'
const arrived = ref(false)

// 维修信息数据
const repairInfo = ref([])

// 车辆信息数据
const carInfo1 = ref([])

// 返回上一页
const backPage = () => {
	uni.navigateBack()
}

// 拨打电话
const makePhoneCall = () => {
	uni.makePhoneCall({
		phoneNumber: repairInfo.value.phone
	})
}

// 打开位置
const openLocation = () => {
	// 这里需要集成地图API，获取具体经纬度
	uni.showToast({
		title: '打开位置信息',
		icon: 'none'
	})
}

// 预览图片
const previewImage = (current, urls) => {
	uni.previewImage({
		current,
		urls: urls || [current]
	})
}

// 确认到场
const confirmArrival = () => {
	console.log("修改",id.value);
	
	if (arrived.value) return
	uni.showModal({
		title: '确认到场',
		content: '是否确认到场？',
		success: (res) => {
			if (res.confirm) {
				arrived.value = true
				updateStatus(id)
				uni.showToast({
					title: '已确认到场',
					icon: 'success'
				})
				getWeiXiuTask(id)
			}
		}
	})
       
}
const id=ref('')
onLoad((option)=>{
	console.log(option,"接收到的东西")
	id.value=option.id
	console.log(id.value,"id");
	
	getWeiXiuTask(option.id)

})
const taskList=ref([])

//获得维修任务
 function   getWeiXiuTask(id){
		request({
			url:'evaluate/reservation/'+id,
			method:'get',
			success:(res=>{
			console.log("获取维修任务成功:", res);
			taskList.value = res.data.data
			console.log("获取维修任务成功123:", taskList.value);
			repairInfo.value = taskList.value
			console.log("获取维:", repairInfo.value);
			getCarType(repairInfo.value.carInfo.type)
		})
	})
}
	//根据id更改状态
	function updateStatus(id){
		console.log("到这里了",id);
		
		request({
			url:'evaluate/reservation',
			method:'put',
			data:{status:2,
				   id:id.value
			},
			success:(res=>{	
			console.log("更改状态成功:", res);
			arrived.value = taskList.value.status!=0
			
			
		})
		},		
		)

	}
//获取车类型
function getCarType(id){
	request({
		url:'bigbase/brand/'+id,
		method:'get',
		success:(res=>{
			console.log("获取车类型成功:", res);
			carInfo1.value = res.data.data
			console.log("获取车类型ID:", carInfo1.value.id);
			console.log("获取车种类名:", carInfo1.value.name);
		})
	})
}





</script>

<style lang="scss">
.repair-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100rpx;

	.nav-bar {
		background-color: #007AFF;
		color: #fff;
		padding: 44px 16px 10px;
		display: flex;
		align-items: center;
		
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 18px;
		}
		
		.right-icons {
			width: 24px;
		}
	}

	.info-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.info-list {
			.info-item {
				display: flex;
				margin-bottom: 20rpx;
				
				.label {
					color: #666;
					width: 160rpx;
				}
				
				.value {
					flex: 1;
					color: #333;
					
					&.clickable {
						color: #007AFF;
					}
					
					&.location {
						display: flex;
						align-items: center;
						
						&::after {
							content: '';
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.image-preview {
		width: 100%;
		height: 300rpx;
		margin: 20rpx 0;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		image {
			width: calc((100% - 40rpx) / 3);
			height: 200rpx;
			border-radius: 8rpx;
		}
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #007AFF;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		&.disabled {
			background-color: #999 !important;
			color: #fff !important;
			pointer-events: none;
		}
	}
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 10rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 0rpx; left: 30rpx;}	 
</style>
